<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>ele实时编辑器</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<script src="jquery.min.js"></script>

	<link rel="stylesheet" href="./element/element.css">
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="./element/element.js"></script>
	<script type="text/javascript" src="request.js"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="./css3d/index.css">
	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->

	<style>
		.header {
			text-align: center;
		}

		.content {
			
		}
		a{
			cursor: pointer;
		}
		.content .info,
		.content .video{
			width: 50%;
			float: left;
		}
		.content .base>div{
			float: left;
			width: 33%;
		}
		.content .index >div{
			float: left;
			width: 33%;
			text-align:center;
		}
		.content .project .item>div{
			float: left;
			text-align:center;
		}


		.content .project .item .title{
			float: left;
			width: 33%;
			text-align:center;
		}
		.content .project .item .status{
			float: left;
			width: 33%;
			text-align:center;
		}

		.top-list{
			float: left;
			width: 50%;
		}
		.top-list .item{
			float: left;
			width: 100%;
		}
		.top-list .item div{
			float: left;
		}
		.top-list .item .title+div{
			float: right;
			margin-right: 10%;
		}

		.video .item{
			float: left;
			width: 100%;
		}
		.video .item div{
			float: left;
			width: 30%;
		}
		.video .item .title+div{
			float: right;
			text-align: right;
		}

	</style>

</head>

<body>
	<div class="header">
		实施施工数据
	</div>
	<div id="monitoring" class="content">
		<div class="info">
			<div class="base">
				<div>苏州店/全国</div>
				<div>今日</div>
				<div>{{cur_time}}</div>
			</div>
			<div class="index">
				<div v-for="(item, index) in index_list" class="item">
					<div>{{item.title}}</div>
					<div>{{item.value}}</div>
					
				</div>
			</div>
			<div class="project">
				<h5>在建项目视频监控滚动</h5>
				<div v-for="(item, index) in project_list" class="item">
					<div class="title">{{index+1}}{{item.title}}</div>
					<div class="status">{{item.status}}</div>
					<div><a>查看</a></div>
					
				</div>
			</div>
			<div class="top-list">
				<h5>施工经理top3</h5>
				<div v-for="(item, index) in manager_list" class="item">
					<div>{{index+1}}</div>
					<div class="title">{{item.name}}</div>
					<div>{{item.num}}单</div>
				</div>
			</div>
			<div class="top-list">
				<h5>工程管家top3</h5>
				<div v-for="(item, index) in housekeeper_list" class="item">
					<div>{{index+1}}</div>
					<div class="title">{{item.name}}</div>
					<div>{{item.num}}单</div>
					
				</div>
			</div>

		</div>
		<div class="video">
			<div>视频监控</div>
			<div v-for="(item, index) in video_list" class="item">
					<div class="title">{{index+1}}{{item.title}}</div>
					<div><a>更多</a></div>
				<div class="resourse">
					<video src=""></video>
				</div>
				
			</div>
		</div>

		<div v-for="(item,index) in map_unit_list" class="map-unit">
			{{index}}
		</div>
	</div>


</body>


</html>
<script>


monitoring = new Vue({
		el: "#monitoring",
		data() {
			return {
				map_unit_list:[],
				index_list: [{
					title: '今日开工',
					value:20,
				}, {
					title: '今日在建',
					value:15,
				}, {
					title: '今日完工',
					value:5,
				}, {
					title: '待开工',
					value:5,
				}, {
					title: '待验收',
					value:2,
				}, {
					title: '停工',
					value:1,
				}],
				project_list: [{
					title: '海德公园',
					status:'视频监控中'
				}, {
					title: '海尚壹品',
					status:'信号中断'
				}, {
					title: '中海国际',
					status:'正在重连中'
				}, {
					title: '金色万科',
					status:'视频监控中'
				}],
				manager_list: [{
					name: '张三',
					num:2,
				}, {
					name: '李四',
					num:4,
				}, {
					name: '王五',
					num:1,
				}, {
					name: '赵四',
					num:3,
				}],
				housekeeper_list: [{
					name: '雷军',
					num:7,
				}, {
					name: '马云',
					num:1,
				}, {
					name: '张一鸣',
					num:5,
				}, {
					name: '马化腾',
					num:3,
				}],
				video_list: [{
					title: '海德公园',
				
				}, {
					title: '金色万科',
				}],
				//cur_time:(new Date()).toLocaleString()
			};
		},

		computed: {
			cur_time(){
				var d =  new Date();
				return (d.getMonth()+1)+'月'+d.getDate()+'日  '+d.getHours()+':'+d.getMinutes();
			}
		},
		mounted: function () {
			this.init();
			this.$nextTick(function () {

			})
		},

		methods: {
			init() { 
				var that = this;
            for(i=0;i<100;i++){
                that.map_unit_list.push({
                    index:i
                })
            }
			},
			toggel_section(item) {
				this.cur_section = item.name;
				this.setting_list = this.setting_data[item.name];

				this.$nextTick(function () {

				})

			},
			add_code(item) {
				this.code += $.trim($("#" + item.id).html().replace(/\#/, this.handler_value_name)) + "\n";

				this.$nextTick(function () {

				})

			},
			toggel_hot_use(item) {
				debugger;

				this.hot_use_list = item.hot.split(",");

			},
			assign_value(item) {
				this.handler_value_name = item;


			},
		}
	});



</script>